<template>
  <div class="locks-view-container">
    <div class="left">
      <template v-if="activeRouter===1">
        <div class="left-title">
          <i class="iconfont iconsuojuguanli_huaban"></i>
          锁具管理</div>
        <div class="left-contain">
          <LocksMenu />
        </div>
      </template>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import LocksMenu from "./components/LocksMenu/index.vue";
import { publicAPIModule } from "@/store/modules/public";
@Component({
  components: { LocksMenu },
})
export default class extends Vue {
  public activeRouter = 0;
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    // console.log(to);
    if (to.meta.name === "secondLevel") {
      this.activeRouter = 1;
    } else {
      this.activeRouter = 0;
    }
  }
    mounted() {
       publicAPIModule.queryHasDataStations('LOCK');
  }
}
</script>
<style lang="scss" scoped>
.locks-view-container {
  width: 100%;
  height: 100%;
  padding: 0.88rem 0.24rem 0.24rem 0.24rem;
  box-sizing: border-box;
  display: flex;
  .left {
    &-title {
      width: 100%;
      height: 0.4rem;
      font-size: 0.2rem;
      display: flex;
      align-items: center;
    }
    &-contain {
      width: 100%;
      height: calc(100% - 0.4rem);
    }
  }
  .right {
    width: 100%;
    height: 100%;
  }
}
</style>